// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
// import echarts from 'echarts'
const staticOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a}<br/>{b}:{c}次/月'
  },
  calculable: true,
  legend: {
    icon: 'roundRect',
    itemWidth: 20,
    itemHeight: 6,
    itemGap: 15,
    x: 'center',
    y: '10%',
    selectedMode: false,
    data: [],
    textStyle: {
      color: '#bad3ff',
      fontSize: 20
    }
  },
  series: [{
    name: '互动情况',
    type: 'pie',
    radius: ['30%', '110%'],
    avoidLabelOverlap: false,
    startAngle: 0,
    center: ['50%', '90%'],
    roseType: 'area',
    selectedMode: 'single',
    label: {
      show: true,
      formatter: '{c}次/月',
      textStyle: {
        fontSize: 18
      }
    },
    labelLine: {
      show: true,
      smooth: false
    },
    data: []
  }]
}

const staticOptionMid = {
  tooltip: {
    trigger: 'item',
    formatter: '{a}<br/>{b}:{c}次/月'
  },
  calculable: true,
  legend: {
    icon: 'roundRect',
    itemWidth: 20,
    itemHeight: 6,
    itemGap: 10,
    x: 'center',
    y: '10%',
    selectedMode: false,
    data: [],
    textStyle: {
      color: '#bad3ff',
      fontSize: 14
    }
  },
  series: [{
    name: '互动情况',
    type: 'pie',
    radius: ['30%', '90%'],
    avoidLabelOverlap: false,
    startAngle: 0,
    center: ['50%', '90%'],
    roseType: 'area',
    selectedMode: 'single',
    label: {
      show: true,
      formatter: '{c}次/月',
      textStyle: {
        fontSize: 12
      }
    },
    labelLine: {
      show: true,
      smooth: false
    },
    data: []
  }]
}

// 备选颜色，有需求则进行循环
const colors = ['#3a4fec', '#0067ff', '#1bc3a7', '#a1e982', '#ffdd7e']
let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    let dataLength = additionalOptions.seriesData.length
    for (let i = 0; i < dataLength; i += 1) {
      this.option.series[0].data.push({
        value: 0,
        name: '',
        label: {
          show: false
        },
        labelLine: {
          show: false
        }
      })
    }
    colorIndex = 0
    additionalOptions.seriesData.forEach((p1) => {
      this.option.series[0].data.push({
        value: p1.value,
        name: p1.name,
        itemStyle: {
          color: colors[colorIndex]
        }
      })
      this.option.legend.data.push(p1.name)
      colorIndex += 1
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.legend.data = []
    this.option.series[0].data = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
